<script setup lang="ts">
import { ref } from 'vue'
// 控制对话框展示与隐藏的布尔值
const visible = ref(false)
</script>
<template>
  <div style="transform: translate(1px);">
    <button @click="visible = true">显示对话框</button>
    <!-- 被Teleport传送门标签包裹的元素, 会被传送到to指定的容器内 -->
    <Teleport to="body">
      <XtxDialog title="切换收货地址" v-model:visible="visible">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
        <template #footer>
          <XtxButton type="primary" @click="visible = false">ok</XtxButton>
          <XtxButton type="gray" @click="visible = false">cancel</XtxButton>
        </template>
      </XtxDialog>
    </Teleport>
  </div>

</template>



<style scoped>
</style>